import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Col, Radio, Row, Spin } from 'antd';
import { WeaBrowser, WeaLeftRightLayout, WeaDialog, WeaCheckbox, WeaFormItem, WeaLocaleProvider, WeaInputNumber, WeaPopoverHrm, WeaRightMenu, WeaSearchGroup, WeaSelect, WeaTab, WeaTop, } from 'ecCom';
import { WeaTableNew } from "comsMobx";
import PersonTree from '../../public/persontree/PersonTree'
import { renderAlertPage } from '../../util/Util';
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核成绩
 */
@inject("accessResultListStore")
@observer
export default class AccessResultList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showLeft: false, //是否显示左侧栏
        };
        this.store = this.props.accessResultListStore;
    }

    componentWillMount() {
        this.store.doInit();
    }

    componentDidMount(){
        this.store.initLabel();
    }

    render() {
        const { loading, tableStore, topTab, queryParams, yearDatas, monthdata, seasondata, nowmonth, nowseason, titlename, queryParams: { type1, type2, year },
            setShowSearchAd, showSearchAd, getAccessResultExportData, getAccessResultListData, isEnableCycle: { isfyear, ishyear, isquarter, ismonth } } = this.store;
        //暂未开启任何考核周期
        if (!isfyear && !ishyear && !ismonth && !isquarter) {
            return renderAlertPage('<span style="color:red">' + getLabel(508557, "暂未开启任何考核周期") + '</span>')
        }
        let menu = [{
            key: '0',
            icon: <i className='icon-coms-search' />,
            content: getLabel('388113', '搜索'),
            onClick: getAccessResultListData,
        }, {
            key: '1',
            icon: <i className="icon-coms-excel2" />,
            content: getLabel('28304', 'Excel'),
            onClick: getAccessResultExportData,
        }];
        return (
            <div className="wea-workrelate-performance-resultlist" style={{ height: "100vh" }}>
                <Spin spinning={loading}>
                    <div style={{ height: "100vh" }}>
                        <WeaRightMenu datas={menu}>
                            <WeaPopoverHrm />
                            <WeaTop
                                title={getLabel(508620, '考核成绩查询列表')}
                                icon={<i className='icon-coms-implement' />}
                                iconBgcolor='rgb(150, 53, 138)'
                                showDropIcon
                                dropMenuDatas={menu}
                            />
                            <WeaLeftRightLayout
                                isNew={true}
                                showLeft={true}
                                leftWidth={200}
                                leftCom={<PersonTree onPersonClick={this.onPersonClick} treeNodeClick={this.treeNodeClick} />}
                                showLeft={this.state.showLeft}
                                onCollapse={showLeft => this.setState({ showLeft })}
                            >
                                <WeaTab
                                    datas={topTab}
                                    searchType={["advanced"]}
                                    showSearchAd={showSearchAd}
                                    hideSearchAd={() => setShowSearchAd(false)}
                                    keyParam="viewcondition" //主键
                                    selectedKey={queryParams.type1}
                                    onChange={v => this.typeOnChange(v)}
                                    setShowSearchAd={bool => setShowSearchAd(bool)}
                                    buttonsAd={this.getTabButtonsAd()}
                                    searchsAd={this.getSearchsAd()}
                                />
                                <div className='year-date'>
                                    <span>
                                        <WeaSelect
                                            options={yearDatas}
                                            value={year}
                                            onChange={(val) => this.yearOnChange(val)}
                                        />
                                        {type1 == 1 && <RadioGroup onChange={(e) => this.monthOnChange(e.target.value)} value={nowmonth} style={{ verticalAlign: "bottom" }}>
                                            {monthdata && monthdata.length > 0 && monthdata.map((element, idx) => {
                                                return <RadioButton value={element.label}>{element.value}</RadioButton>
                                            })}
                                        </RadioGroup>}
                                        {type1 == 2 && <RadioGroup onChange={(e) => this.monthOnChange(e.target.value)} value={nowseason} style={{ verticalAlign: "bottom" }}>
                                            {seasondata && seasondata.length > 0 && seasondata.map((element, idx) => {
                                                return <RadioButton value={element.label}>{element.value}</RadioButton>
                                            })}
                                        </RadioGroup>}
                                    </span>
                                    {/* <span>
                                        {titlename}
                                    </span> */}
                                </div>
                                <WeaTable
                                    comsWeaTableStore={tableStore}
                                    hasOrder
                                    needScroll
                                    onOperatesClick={this.onOperatesClick.bind(this)} //右键菜单操作
                                />
                                {/* <WeaDialog visible>
                                        <textarea>
                                            {cc.sqlserver}
                                        </textarea>
                                </WeaDialog> */}
                            </WeaLeftRightLayout>
                        </WeaRightMenu>
                    </div>
                </Spin>
            </div>
        )
    }
    //点击节点
    treeNodeClick = (event, ids, selectedKeys, nodes) => {
        let { onMoreSearchChange, getAccessResultListData } = this.store;
        let { name, type, id } = nodes[0];
        if (type == 3) {
            onMoreSearchChange({ hrmids: id, hrmnames: name, departmentids: null, departmentnames: null, subcompanyids: null, subcompanynames: null });
        } else if (type == 2) {
            onMoreSearchChange({ hrmids: null, hrmnames: null, departmentids: id, departmentnames: name, subcompanyids: null, subcompanynames: null });
        } else if (type == 1) {
            onMoreSearchChange({ hrmids: null, hrmnames: null, departmentids: null, departmentnames: null, subcompanyids: id, subcompanynames: name });
        }
        getAccessResultListData();
    }

    //点击人员
    onPersonClick = (hrmId, hrmname) => {
        this.store.onMoreSearchChange({ hrmids: hrmId, hrmnames: hrmname, departmentids: null, departmentnames: null, subcompanyids: null, subcompanynames: null });
        this.store.getAccessResultListData();
    }

    //表格每行右侧菜单操作
    onOperatesClick(record, index, operate, flag) {
        if (operate.index === '0') {
            //查看
            if (record.scoreid != "") {
                window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/accessView?scoreid=" + record.scoreid);
            } else {
                window.open("/spa/workrelate/static/index.html#/main/workrelate/performance/accessView?resourceid=" + record.hrmid + "&year=" + this.store.queryParams.year + "&type1=" + this.store.queryParams.type1 + "&type2=" + this.store.queryParams.type2);
            }
        }
    }

    //查询类型变动
    typeOnChange(value) {
        let type;
        if (value === "3" || value === "4") {
            type = "";
        } else if (value === "1") {
            type = this.store.nowmonth;
        } else if (value === "2") {
            type = this.store.nowseason;
        }
        this.store.onMoreSearchChange({ type1: value, type2: type });
        this.store.getAccessResultListData();
    }

    //月份变动
    monthOnChange(value) {
        this.store.onSearchChange(value, 'type2');
        this.store.getAccessResultListData();
    }

    //年份变动
    yearOnChange(value) {
        this.store.onSearchChange(value, 'year');
        this.store.getAccessResultListData();
    }
    //高级搜索条目
    getSearchsAd() {
        let { statusData, includesubData, includedeptData, queryParams, onSearchChange, onMoreSearchChange, hrmData, subcompanyData, departmentData } = this.store
        let items = [];
        items.push({
            com:
                <WeaFormItem label={getLabel('500401', '类型')} ratio1to2>
                    <WeaSelect
                        value={queryParams.status}
                        options={statusData}
                        onChange={(val) => onSearchChange(val, 'status')}
                    />
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem label={getLabel(15657, '成绩')} ratio1to2>
                    <Row>
                        <Col span={7}>
                            <WeaInputNumber
                                value={queryParams.minresult}
                                precision={2}
                                onChange={(val) => onSearchChange(val, 'minresult')}
                            />
                        </Col>
                        <Col span={2}>
                            <div style={{ "text-align": "center" }}>--</div>
                        </Col>
                        <Col span={7}>
                            <WeaInputNumber
                                value={queryParams.maxresult}
                                precision={2}
                                onChange={(val) => onSearchChange(val, 'maxresult')}
                            />
                        </Col>
                        <Col span={8}>
                            <div style={{ marginLeft: 30 }}>
                                <WeaCheckbox
                                    value={queryParams.isreset}
                                    onChange={(val) => onSearchChange(val, 'isreset')} />
                                <span style={{ marginRight: 10 }}>{getLabel('509099', '有更新')}</span>
                            </div>
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem label={getLabel('30042', '人员')} ratio1to2>
                    <WeaBrowser
                        type={17}
                        isSingle={false}
                        title={getLabel(179, '人力资源')}
                        replaceDatas={hrmData}
                        onChange={(ids, names) => {
                            onMoreSearchChange({ hrmids: ids, hrmnames: names });
                        }}
                    />
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem label={getLabel('33553', '分部')} ratio1to2>
                    <Row>
                        <Col span={8}>
                            <WeaSelect
                                value={queryParams.includesub}
                                options={includesubData}
                                onChange={(val) => onSearchChange(val, 'includesub')}
                            />
                        </Col>
                        <Col span={15} offset={1}>
                            <WeaBrowser
                                type={164}
                                title={getLabel(33553, '分部')}
                                icon="icon-coms-hrm"
                                replaceDatas={subcompanyData}
                                onChange={(ids, names) => {
                                    onMoreSearchChange({ subcompanyids: ids, subcompanynames: names });
                                }}
                            />
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem label={getLabel(27511, '部门')} ratio1to2>
                    <Row>
                        <Col span={8}>
                            <WeaSelect
                                value={queryParams.includedept}
                                options={includedeptData}
                                onChange={(val) => onSearchChange(val, 'includedept')}
                            />
                        </Col>
                        <Col span={15} offset={1}>
                            <WeaBrowser
                                type={4}
                                title={getLabel(27511, '部门')}
                                icon="icon-coms-hrm"
                                replaceDatas={departmentData}
                                onChange={(ids, names) => {
                                    onMoreSearchChange({ departmentids: ids, departmentnames: names });
                                }}
                            />
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        return <WeaSearchGroup title={getLabel(32905, '常用条件')} items={items} showGroup={true} col={2} />
    }

    getTabButtonsAd() {
        const { setShowSearchAd, resetSearchAd, advanceSearch } = this.store;
        return [
            (<Button type="primary" onClick={advanceSearch}>{getLabel(388113, '搜索')}</Button>),
            (<Button type="ghost" onClick={resetSearchAd}>{getLabel(2022, '重置')}</Button>),
            (<Button type="ghost" onClick={() => setShowSearchAd(false)}>{getLabel(31129, '取消')}</Button>)
        ]
    }

};
